function gefDemo() {
    var shell = document.getElementById('shell');

    var table = $("#table").toCreateZcTable({
        'colsname':[],
        'colclassname':[],
        'evenbackgroundcolor':'#EBEBEB',
        'oddbackgroundcolor':'#FFFFFF',
        'contentborder':'true',
        'isShowIcon':'false',
        'isShowSum':'true',
        'isShowCheckbox':'false'
    });
    table.initTable();
    table.setupZeroTr('show');
    table.setSelectstate('true');
    var firstData = table.getSerialize();

    var subtableModel=new BCP.bill.model.SubtableModel();
    subtableModel.setInitData({tableData:firstData});
    subtableModel.setConfig({text:"SubTable",icon:"icon-zibiaokongjian"});

    var grid = document.getElementById('grid');
    var gridData = {
        cells:{
            rowList:null
        },
        mergeCells:[],
        cols:[],
        rows:[],
        colHeaderCount:0,
        rowHeaderCount:0,
        colFooterCount:0,
        rowFooterCount:0,
        rowCount:4,
        colCount:6,
        options:{
            loadMode:1,
            selectionColor:'rgba(248,110,110,0.3)',
            currentCellColor:'transparent',
            currentCellBorderColor:'rgb(255,97,0)'
        }
    }
    function createCellModel(x,y){
        return{
            colIndex:y,
            rowIndex:x,
            editorId:null,
            title:null,
            showText:null,
            editText:null,
            selectable:true,
            editable:true,
            cellMode:1,
            clientData:null,
            isTreeEnd:false,
            rowSpan:1,
            colSpan:1,
            isMerged:false,
            border:[1,1],
            borderColor: ['#E5E5E5', '#E5E5E5', '#00f', '#0ff'],
            fontName:'宋体',
            fontSize: 14,
            wrapLine: false,
            horzAlign: 3,
            vertAlign: 3,
            vertText: false,
            fitFontSize:true,
            multiLine:true
        }
    }
    var cellLists = [];
    var cellList,cell;
    for (var i = 0; i < gridData.rowCount; i++) {
        cellList = [];
        for (var j = 0; j < gridData.colCount; j++) {
            cell = createCellModel(i, j);
            if(i==0||j==0){
              cell.backColor='#f3f3f3'
              cell.showText = null;
            }

            cellList.push(cell);
        }
        cellLists[i] = cellList;
    }
 gridData.cells.rowList = cellLists;
    function createModel(value) {
        return {
            size: value,
            auto: false,
            hidden: false,
            clientSize: value
        };
    }
    (function() {
        var rows = [];
        var row;
        for (var i = 0; i < gridData.rowCount; i++) {
            row = createModel(20);
            rows.push(row);
        }
        gridData.rows = rows;

        var cols = [];
        var col;
        for (var i = 0; i < gridData.colCount; i++) {
            col = createModel(100);
            cols.push(col);
        }
        gridData.cols = cols;
    })();
    var gridTable = new Grid(grid,gridData);
    gridTable.setColVisible(0,false);
    gridTable.setRowVisible(0,false);
    gridTable.getCell(1,1).setShowText('序号');
    gridTable.getCell(1,3).setShowText('合计');
    gridTable.getCell(1,3).setEditable(false);
    gridTable.getCell(0,2).setClientData({isFloatRow:true});
    var serializeData = JSON.stringify(gridTable.getData());

    var subtableH5Model=new BCP.bill.model.SubtableH5Model();
    subtableH5Model.setInitData({tableData:serializeData});
    subtableH5Model.setConfig({text:"SubTableH5",icon:"icon-zibiaokongjian"});

    var listbasedataModel = new BCP.bill.model.ListbasedataModel();
    listbasedataModel.setConfig({text:"ListBaseData",icon:"icon-liebiaojichushujukongjian"});

    var anchorModel = new ADF.model.AnchorModel();
    anchorModel.setConfig({text:"Anchor",icon:"icon-label"});

    var buttonModel = new ADF.model.ButtonModel();
    buttonModel.setText('ADF按钮');
    buttonModel.setConfig({text:"Button",icon:"icon-btn"});

    var labelModel=new ADF.model.LabelModel();
    labelModel.setText('ADF标签');
    labelModel.setConfig({text:"Label",icon:"icon-label"});

    var inputModel=new ADF.model.InputModel();
    inputModel.setText('ADF输入');
    inputModel.setConfig({text:"Input",icon:"icon-input"});

    var textareaModel=new ADF.model.TextAreaModel();
    textareaModel.setText('ADF文本域');
    textareaModel.setConfig({text:"TextArea",icon:"icon-textarea"});

     var imageModel=new ADF.model.ImageModel();
     imageModel.setSrc('/adfdesigner/images/sea.jpg');
    imageModel.setConfig({text:"Image",icon:"icon-images"});

    var datetimeModel=new ADF.model.DatetimeModel();
    datetimeModel.setConfig({text:"Datetime",icon:"icon-Datetime"});

    var numberModel=new ADF.model.NumberModel();
    numberModel.setConfig({text:"Number",icon:"icon-number"});

    var buttongroupModel=new ADF.model.ButtonGroupModel();
    buttongroupModel.setConfig({text:"ButtonGroup",icon:"icon-buttonG"});

    var bcpLabelModel=new BCP.bill.model.LabelModel();
    bcpLabelModel.setText("BCP标签");
    bcpLabelModel.setConfig({text:"BCPLabel",icon:"icon-label"});

    var bcpButtonModel=new BCP.bill.model.ButtonModel();
    bcpButtonModel.setText("BCP按钮");
    bcpButtonModel.setConfig({text:"BCPButton",icon:"icon-btn"});

    var bcpInputModel=new BCP.bill.model.InputModel();
    bcpInputModel.setText("BCP输入");
    bcpInputModel.setConfig({text:"BCPInput",icon:"icon-input"});

    var bcpTextAreaModel=new BCP.bill.model.TextAreaModel();
    bcpTextAreaModel.setText("BCP文本域");
    bcpTextAreaModel.setConfig({text:"BCPTextArea",icon:"icon-textarea"});

     var bcpImageModel=new BCP.bill.model.ImageModel();
     bcpImageModel.setSrc('/adfdesigner/images/sea.jpg');
    bcpImageModel.setConfig({text:"BCPImage",icon:"icon-images"});

    var bcpDatetimeModel=new BCP.bill.model.DatetimeModel();
    bcpDatetimeModel.setConfig({text:"BCPDatetime",icon:"icon-Datetime"});

    var bcpNumberModel=new BCP.bill.model.NumberModel();
    bcpNumberModel.setConfig({text:"BCPNumber",icon:"icon-number"});


    var xyCompositeModel = new ADF.model.XYCompositeModel();
    xyCompositeModel.setConfig({text:"Composite",icon:"icon-compoaite"});

    var bootstrapContainerModel = new ADF.model.BootstrapContainerModel();
    bootstrapContainerModel.setConfig({text:"Container",icon:"icon-containe"});

    var bootstrapRowModel = new ADF.model.BootstrapRowModel();
    bootstrapRowModel.setConfig({text:"Row",icon:"icon-row"});

    var bundles = [
        new ADF.control.Diagram(),
        new ADF.control.Anchor(),
        new ADF.control.Button(),
        new ADF.control.Input(),
        new ADF.control.Label(),
        new ADF.control.TextArea(),
        new ADF.control.Image(),
        new ADF.control.Datetime(),
        new ADF.control.Number(),
        new ADF.control.ButtonGroup(),
        new ADF.control.XYComposite(),
        new ADF.control.BootstrapContainer(),
        new ADF.control.BootstrapRow(),
		new BCP.bill.control.Diagram(),
		new BCP.bill.control.Label(),
        new BCP.bill.control.Button(),
        new BCP.bill.control.Input(),
        new BCP.bill.control.TextArea(),
        new BCP.bill.control.Image(),
        new BCP.bill.control.Datetime(),
        new BCP.bill.control.Number(),
        new BCP.bill.control.Subtable(),
        new BCP.bill.control.SubtableH5(),
        new BCP.bill.control.Listbasedata(),
        new ADF.tool.CreationGroup(),
        new ADF.tool.ContainerGroup(),
        new ADF.tool.SelectionGroup(),
        new ADF.tool.SelectionTool(),
        new ADF.tool.MarqueeSelectionTool(),
        new ADF.tool.ContainerTool(xyCompositeModel),
        new ADF.tool.ContainerTool(bootstrapContainerModel),
        new ADF.tool.ContainerTool(bootstrapRowModel),
        new ADF.tool.ContainerTool(buttongroupModel),
        new ADF.tool.CreationTool(anchorModel),
        new ADF.tool.CreationTool(buttonModel),
        new ADF.tool.CreationTool(labelModel),
        new ADF.tool.CreationTool(inputModel),
        new ADF.tool.CreationTool(textareaModel),
        new ADF.tool.CreationTool(imageModel),
        new ADF.tool.CreationTool(datetimeModel),
        new ADF.tool.CreationTool(numberModel),
        new ADF.tool.CreationTool(bcpLabelModel),
        new ADF.tool.CreationTool(bcpButtonModel),
        new ADF.tool.CreationTool(bcpInputModel),
        new ADF.tool.CreationTool(bcpTextAreaModel),
        new ADF.tool.CreationTool(bcpImageModel),
        new ADF.tool.CreationTool(bcpDatetimeModel),
        new ADF.tool.CreationTool(bcpNumberModel),
        new ADF.tool.CreationTool(subtableModel),
        new ADF.tool.CreationTool(subtableH5Model),
        new ADF.tool.CreationTool(listbasedataModel),
        new BCP.bill.property.ComplexGroup({text:"高级属性",icon:"icon-gaojishuxing"}),
        new BCP.bill.property.SubtableEditor(),
        new BCP.bill.property.SubtableH5Editor(),
        new BCP.bill.property.MetadataPropertyEditor(),
        new BCP.bill.property.AttrBindingPropertyEditor(),
        new BCP.bill.property.ActionBindingPropertyEditor(),
        new BCP.bill.property.ListbasedataEditor(),
        new ADF.property.XYLayoutdataPropertyEditor(),
        new ADF.property.ButtonGroupLayoutDataEditor(),
        new ADF.property.ContainerLayoutDataEditor(),
        new ADF.property.RowLayoutDataEditor(),
        new ADF.property.DiagramLayoutDataEditor(),
        new ADF.property.PromptsPropertyEditor(),
        new ADF.property.CheckalignPropertyEditor(),
        new ADF.property.BaseGroup({text:"基本属性",icon:"icon-jibenshuxing"}),
        new ADF.action.UndoAction(),
        new ADF.action.RedoAction(),
        new ADF.action.DeleteAction(),
        new ADF.action.BottomAction(),
        new ADF.action.TopAction(),
        new ADF.action.XYUpAction(),
        new ADF.action.XYDownAction(),
        new ADF.action.XYLeftAction(),
        new ADF.action.XYRightAction(),
        new ADF.action.XYAlignLeftAction(),
        new ADF.action.XYAlignCenterAction(),
        new ADF.action.XYAlignRightAction(),
        new ADF.action.XYAlignTopAction(),
        new ADF.action.XYAlignMiddleAction(),
        new ADF.action.XYAlignBottomAction(),
        new ADF.action.XYDistributeHorizontallyAction(),
        new ADF.action.XYDistributeVerticallyAction(),
        new ADF.action.XYDistributeEvenlyAction(),
        new ADF.action.CopyAction(),
        new ADF.action.PasteAction(),
        new ADF.action.CloseTitleAction(),
        new ADF.action.OpenTitleAction(),


        new BCP.CreationTool(new BCP.attrModel.TextModel({name : "name", title : "姓名"})),
        new BCP.CreationTool(new BCP.attrModel.DatetimeModel({name : "starttime", title : "开始时间"})),
        new BCP.CreationTool(new BCP.attrModel.FloatModel({name : "money", title : "金额"})),
        new BCP.CreationTool(new BCP.attrModel.IntModel({name : "count", title : "人数"})),
        new BCP.CreationTool(new BCP.attrModel.ListbasedataModel({name : "contact", title : "联系人"})),
        new BCP.CreationTool(new BCP.attrModel.TextModel({name : "age", title : "年龄"}))
    ];


    // var contentsJSONString = "{\"modelType\":\"BCP.bill.model.DiagramModel\",\"children\":[\"{\\\"modelType\\\":\\\"ADF.model.ButtonModel\\\",\\\"text\\\":\\\"{\\\\\\\"key\\\\\\\":null,\\\\\\\"name\\\\\\\":\\\\\\\"text\\\\\\\",\\\\\\\"title\\\\\\\":\\\\\\\"文本\\\\\\\",\\\\\\\"value\\\\\\\":\\\\\\\"Button1\\\\\\\",\\\\\\\"defaultValue\\\\\\\":\\\\\\\"\\\\\\\",\\\\\\\"editable\\\\\\\":true,\\\\\\\"editorType\\\\\\\":\\\\\\\"baseProperty.defaultTextEditor\\\\\\\",\\\\\\\"serializable\\\\\\\":true}\\\",\\\"bounds\\\":\\\"{\\\\\\\"key\\\\\\\":null,\\\\\\\"name\\\\\\\":\\\\\\\"bounds\\\\\\\",\\\\\\\"title\\\\\\\":\\\\\\\"bounds\\\\\\\",\\\\\\\"value\\\\\\\":{\\\\\\\"x\\\\\\\":226,\\\\\\\"y\\\\\\\":51,\\\\\\\"width\\\\\\\":145,\\\\\\\"height\\\\\\\":34},\\\\\\\"defaultValue\\\\\\\":null,\\\\\\\"editable\\\\\\\":\\\\\\\"\\\\\\\",\\\\\\\"editorType\\\\\\\":\\\\\\\"boundsProperty.defaultTextEditor\\\\\\\",\\\\\\\"serializable\\\\\\\":true}\\\"}\",\"{\\\"modelType\\\":\\\"ADF.model.ButtonModel\\\",\\\"text\\\":\\\"{\\\\\\\"key\\\\\\\":null,\\\\\\\"name\\\\\\\":\\\\\\\"text\\\\\\\",\\\\\\\"title\\\\\\\":\\\\\\\"文本\\\\\\\",\\\\\\\"value\\\\\\\":\\\\\\\"Button2\\\\\\\",\\\\\\\"defaultValue\\\\\\\":\\\\\\\"\\\\\\\",\\\\\\\"editable\\\\\\\":true,\\\\\\\"editorType\\\\\\\":\\\\\\\"baseProperty.defaultTextEditor\\\\\\\",\\\\\\\"serializable\\\\\\\":true}\\\",\\\"bounds\\\":\\\"{\\\\\\\"key\\\\\\\":null,\\\\\\\"name\\\\\\\":\\\\\\\"bounds\\\\\\\",\\\\\\\"title\\\\\\\":\\\\\\\"bounds\\\\\\\",\\\\\\\"value\\\\\\\":{\\\\\\\"x\\\\\\\":457,\\\\\\\"y\\\\\\\":49,\\\\\\\"width\\\\\\\":157,\\\\\\\"height\\\\\\\":34},\\\\\\\"defaultValue\\\\\\\":null,\\\\\\\"editable\\\\\\\":\\\\\\\"\\\\\\\",\\\\\\\"editorType\\\\\\\":\\\\\\\"boundsProperty.defaultTextEditor\\\\\\\",\\\\\\\"serializable\\\\\\\":true}\\\"}\",\"{\\\"modelType\\\":\\\"ADF.model.ButtonModel\\\",\\\"text\\\":\\\"{\\\\\\\"key\\\\\\\":null,\\\\\\\"name\\\\\\\":\\\\\\\"text\\\\\\\",\\\\\\\"title\\\\\\\":\\\\\\\"文本\\\\\\\",\\\\\\\"value\\\\\\\":\\\\\\\"按钮3\\\\\\\",\\\\\\\"defaultValue\\\\\\\":\\\\\\\"\\\\\\\",\\\\\\\"editable\\\\\\\":true,\\\\\\\"editorType\\\\\\\":\\\\\\\"baseProperty.defaultTextEditor\\\\\\\",\\\\\\\"serializable\\\\\\\":true}\\\",\\\"bounds\\\":\\\"{\\\\\\\"key\\\\\\\":null,\\\\\\\"name\\\\\\\":\\\\\\\"bounds\\\\\\\",\\\\\\\"title\\\\\\\":\\\\\\\"bounds\\\\\\\",\\\\\\\"value\\\\\\\":{\\\\\\\"x\\\\\\\":227,\\\\\\\"y\\\\\\\":118,\\\\\\\"width\\\\\\\":146,\\\\\\\"height\\\\\\\":34},\\\\\\\"defaultValue\\\\\\\":null,\\\\\\\"editable\\\\\\\":\\\\\\\"\\\\\\\",\\\\\\\"editorType\\\\\\\":\\\\\\\"boundsProperty.defaultTextEditor\\\\\\\",\\\\\\\"serializable\\\\\\\":true}\\\"}\",\"{\\\"modelType\\\":\\\"ADF.model.ButtonModel\\\",\\\"text\\\":\\\"{\\\\\\\"key\\\\\\\":null,\\\\\\\"name\\\\\\\":\\\\\\\"text\\\\\\\",\\\\\\\"title\\\\\\\":\\\\\\\"文本\\\\\\\",\\\\\\\"value\\\\\\\":\\\\\\\"按钮4\\\\\\\",\\\\\\\"defaultValue\\\\\\\":\\\\\\\"\\\\\\\",\\\\\\\"editable\\\\\\\":true,\\\\\\\"editorType\\\\\\\":\\\\\\\"baseProperty.defaultTextEditor\\\\\\\",\\\\\\\"serializable\\\\\\\":true}\\\",\\\"bounds\\\":\\\"{\\\\\\\"key\\\\\\\":null,\\\\\\\"name\\\\\\\":\\\\\\\"bounds\\\\\\\",\\\\\\\"title\\\\\\\":\\\\\\\"bounds\\\\\\\",\\\\\\\"value\\\\\\\":{\\\\\\\"x\\\\\\\":457,\\\\\\\"y\\\\\\\":121,\\\\\\\"width\\\\\\\":155,\\\\\\\"height\\\\\\\":34},\\\\\\\"defaultValue\\\\\\\":null,\\\\\\\"editable\\\\\\\":\\\\\\\"\\\\\\\",\\\\\\\"editorType\\\\\\\":\\\\\\\"boundsProperty.defaultTextEditor\\\\\\\",\\\\\\\"serializable\\\\\\\":true}\\\"}\"]}";

    $.get('/read',function (data) {
        var designer = new BCP.Designer(shell, data, bundles);
            designer.open();
        window.designer = designer;

        save.onclick=function () {
            var contents=designer.getContents();
            $.post("/save",contents, function(data){
                alert(data);
            });
        };

        compiler.onclick=function () {
            $.post("/compile",{},function (data) {
                alert(data);
            });
        };

        run.onclick=function () {
            $.post("/runners",function (data) {
                alert(data);
            });
        };

        preview.onclick=function () {
            var contents=designer.getContents();
            $.post("/preview",contents,function (data) {
                if(data =='success'){
                    window.open("https://localhost:4000/test");
                }
            });
        };
    });

}
